<template>
  <div class="batch">
    <div class="import">
      <div class="batchLeft">
        <el-steps direction="vertical" :active="1">
            <el-step />
            <el-step />
          </el-steps>
      </div>

      <div class="batchRight">
        <p class="p1">
            下载<span style="color: #134ffd; cursor: pointer"> 试题模板</span
            >，批量导入试题
          </p>
          <p class="z">
            注:从其他Excel或Word复制试题时请使用选择性粘贴
            Word:右键一选择性粘贴-文本， Excel:右键一选择性粘贴一只勾选 “值”
          </p>
          <p class="p1">上传填写好的试题表</p>
      </div>
    </div>

    <el-upload
    class="upload-demo upload"
    :action="upload.url"
    :headers="upload.headers"
    :on-remove="handleRemove"
    :limit="2"
    :on-exceed="handleExceed"
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
  >
    <el-button type="primary">点击上传文件</el-button>
  </el-upload>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
const emits = defineEmits(['uploadData'])
// 上传的地址和token
const upload = {
  url: 'http://estate.eshareedu.cn/exam/api/student/upload',
  headers: { Authorization: sessionStorage.getItem('token') },
}
// 删除上传的文件
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

// 上传多个提示
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `最大只能上传一个文件 ${files.length}`
  )
}

// 判断文件类型的
const handleBeforeUpload = (file: any) => {
  if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
   ElMessage.error('请上传execl文件')
   return false
  }
}

// 上传文件成功
const handleSuccess = (file: any) => {
  console.log(file);
  if (file.errCode === 10000) {
    ElMessage.success('上传成功')
    emits('uploadData', file.data)
  } else {
      ElMessage.error('上传失败')
  }
}

</script>

<style lang="less" scoped>
  .batch{
    // background-color: aqua;
    .import{
        display: flex;
        .batchLeft{
            height: 125px;
            ::v-deep .el-step.is-vertical .el-step__line{
                color: #c0c4cc;
            }
            ::v-deep .el-step__icon.is-text{
                color: #c0c4cc;
            }
            ::v-deep .el-step__head.is-finish{
                border-color: #c0c4cc;
            }
            ::v-deep .el-step__head.is-process{
                border-color: #c0c4cc;
            }
        }
        .batchRight{
            // background-color: deeppink;
            display: flex;
            flex-direction: column;
            justify-content:space-between;
            .p1{
                font-size: 16px;
                color: #c0c4cc;
            }
            .z{
                color: #f9492d;
                font-size: 13px;
            }
        }
    }
    ::v-deep .el-upload-list__item-name{
        margin-left: 24px;
    }
}
.el-button{
  margin-top: 20px;
}
</style>